/**
 * 基本LESS代码组件
 * 包含了大量需要考虑到兼容性问题的CSS样式组件
 * 样式类名已经按a-z字母顺序排列好, 可以根据需要快速查找到相应的样式代码
 */
@orange: #ff8400;
@baseBgColor:#f0f0f0;
@baseFontColor:#333;
@fontSmallColor: #999;

//旋转直角箭头
.arrow(@deg:-45deg) {
  width: 8px;
  height: 8px;
  position: absolute;
  border-right: 2px solid #bab5ad;
  border-bottom: 2px solid #bab5ad;
  .rotate(@deg);
}

//设置box-flex的值
.boxflex(@value:1){
  -webkit-box-flex:@value;
  -ms-box-flex:@value;
  -ms-flex:@value;
  box-flex:@value;
}

//设置box-shadow的值
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
  box-shadow: @shadow;
}

//设置box-sizing(常用为border-box)
.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
  -moz-box-sizing: @box-model; // Firefox <= 19
  box-sizing: @box-model;
}

//设置元素为圆形
.circle(@width) {
  .radius(@width/2);
  .size(@width, @width);
}

//去除浮动
.clearfix() {
  &:before{
    content:'';
    display: block;
  }
  &:after {
    content:'';
    display: block;
    height: 0;
    clear: both;
  }
}

//设置雪碧图, 区域icon
.css-sprite(@url,@bg-width,@width,@height){
  background-image:url(@url);
  background-repeat:no-repeat;
  background-size:@bg-width auto;
  width:@width;
  height:@height;
  vertical-align:middle;
  display:inline-block;
}

//单行截断
.elli(){
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

//按字符数量截断
.ellipsis(@width) {
  max-width: unit(@width, em);
  .elli();
}

//设置display为box
.flexbox() {
  display: box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-box;
}

//隐藏元素
.Hide {
  display: none !important;
}

//设置高度与行高, 在单行文本居中(单行截断)情况下较为实用
.line(@height) {
  height: unit(@height, px);
  line-height: unit(@height, px);
}

//顶部1px border (retina屏直接使用border: 1px solid #e1e1e1 实际生成的边线宽度为2px)
.line-top(){
  background-image: url('');
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 1px;
}

//底部1px border 说明请看.line-top()
.line-bottom(){
  background-image: url();
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: auto 1px;
}

//顶部1px border 说明请看.line-top()
.lineTop(){
  .line-top();
}

//底部1px border 说明请看.line-top()
.lineBottom(){
  .line-bottom();
}

//上下1px border 说明请看.line-top()
.line-top-bottom(){
  background-image: url(''), url('');
  background-repeat: repeat-x, repeat-x;
  background-position: center bottom, center top;
  background-size: auto 1px, auto 1px;
}

//右侧1px border 说明请看.line-top()
.lineRight(){
  background-image: url();
  background-repeat: repeat-y;
  background-position: right 0;
  background-size: 1px auto;
}

//右下1px border 说明请看.line-top()
.lineRightBottom(){
  background-image: url(),url();
  background-repeat: repeat-y,repeat-x;
  background-position: right 0,0 bottom;
  background-size: 1px auto,auto 1px;
}

//多行截断
.multi-line(@value){
  display: box;
  display: -webkit-box;
  display: -ms-flexbox;
  line-clamp: @value;
  box-orient: vertical;
  -ms-line-clamp: @value;
  -ms-box-orient: vertical;
  -webkit-line-clamp: @value;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}

//圆角设置
.radius(@r) {
  border-radius: @arguments;
  -webkit-border-radius: @arguments;
}

//另一种边线1px设置, 可以通过对其:before进行其它设置（radius）来满足要求
.retina-border(@border:border, @color:#e1e1e1, @position:relative) {
  position: @position;
  &:before{
    content: '';
    .scale(0.5);
    .transform-origin();
    @{border}: 1px solid @color;
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    .box-sizing(border-box);
  }
}

//横向平铺背景线条
.repeat-x() {
  background: url('') repeat-x 0 bottom;
  background-size: auto 1px;
}

//旋转特定角度
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
  -moz-transform: rotate(@degrees);
  -ms-transform: rotate(@degrees);
  -o-transform: rotate(@degrees);
  transform: rotate(@degrees);
}

//缩放特定比例
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
  -moz-transform: scale(@ratio);
  -ms-transform: scale(@ratio);
  -o-transform: scale(@ratio);
  transform: scale(@ratio);
}

//设定渐变蒙版
.shadow(){
  background: -webkit-gradient(linear, left top, left bottom,
  color-stop(0%,   rgba(0,0,0,0)),
  color-stop(60%,  rgba(0,0,0,0.2)),
  color-stop(90%,  rgba(0,0,0,0.6)),
  color-stop(100%, rgba(0,0,0,0.8))
  );
}

//设置大小
.size(@width, @height) {
  width: @width;
  height: @height;
}

//设置方形大小
.square(@size) {
  .size(@size, @size);
}

//设定过度动画
.transition(@value,@time,@function){
  transition: @value @time @function;
  -moz-transition: @value @time @function; /* Firefox 4 */
  -webkit-transition: @value @time @function; /* Safari 和 Chrome */
  -o-transition: @value @time @function; /* Opera */
}

//设定偏移量
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
  -moz-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y);
  -o-transform: translate(@x, @y);
  transform: translate(@x, @y);
}

//设定旋转中心
.transform-origin(@x:0,@y:0){
  -webkit-transform-origin: @x @y;
  -moz-transform-origin: @x @y;
  -ms-transform-origin: @x @y;
  -o-transform-origin: @x @y;
  transform-origin: @x @y;
}

//设置display:box并设定box-align
.vc-align(@value){
  .flexbox();
  -moz-box-align:@value;
  box-align:@value;
  -ms-box-align:@value;
  -webkit-box-align:@value;
}

//设置纵向盒布局
.vc-flexbox(){
  .flexbox();
  box-orient: vertical;
  -ms-box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}


/* 1px边框 */
.border-1px(@clr: #fff) {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  z-index: 0;
  content: "";
  border: 1px solid @clr;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  -webkit-box-sizing: border-box; // Safari <= 5
  -moz-box-sizing: border-box; // Firefox <= 19
  box-sizing: border-box;
}








